import React, { Component } from 'react';

import Swiper from 'swiper'

import BannerStyleComp from './bannerStyleComp'

import { withRouter } from 'react-router-dom'

import { Link } from 'react-router-dom'

const Item = (props) => {
    return (
        <div className="swiper-slide">
            <img className = "img"  src={props.av_origin_zpic}/>
        </div>
    )
}

class Banner extends Component {

    constructor(props) {
        super(props);
        this.state = {
            showFlag:false,
        }
    }
    
    
    renderItem = () => {
        return this.props.list[0] && 
        this.props.list[0].sku.map(item=><Item {...item} key={item.sku_id} />)
    }

    back = () => {
        this.props&&this.props.history.goBack()
    }

    hide = () => {
        this.setState({
            showFlag:!this.state.showFlag
        })
    }

    render() {

        return (
            <BannerStyleComp>
                <div className="fa fa-chevron-left back" onClick = { this.back } ></div>
                <div>
                    <div className = "fa fa-bars hide " onClick = {this.hide} ></div>
                    {this.state.showFlag&&<div className = "show" >
                        <ul>
                            <Link to = {{pathname:'/home'}} className = "fa fa-home" >  首页</Link>
                            <Link to = {{pathname:''}} className = "fa fa-heart" >  我的收藏</Link>
                            <Link to = {{pathname:'/shopcar'}} className = "fa fa-reorder">  我的订单</Link>
                        </ul>
                    </div>
                    }
                </div>
                <div className="swiper-container">
                    <div className="swiper-wrapper">
                       {this.renderItem()}
                    </div>
                    <div className="swiper-pagination"></div>
                </div>
            </BannerStyleComp>
        );
    }
    componentDidUpdate(){
        if(!this.swiper){
            this.swiper = new Swiper ('.swiper-container', {
                loop: true, // 循环模式选项
                autoplay:true,
            })        
        }
    }
}

export default withRouter(Banner) ;